<<<<<<< HEAD
{include file="public:head" /}
{include file="public:footer" /}
55555
<div class="content">
    <div class="slide-banner" data-trackid="首页-焦点图">
        <div class="swiper-wrapper">
            {volist name="banner" id="vo"}
            <div class="swiper-slide"><a href="banner/to?type={$vo.type}&key_word={$vo.key_word}" data-trackid="首页-焦点图-{$vo.id}"><div class="ware-img ui-imglazyload" data-url="{$vo.img.url}"></div></a></div>
            {/volist}
        </div>
        <div class="swiper-pagination"></div>
    </div><!-- //焦点图结束 -->

    <div class="menu flex">
        <a class="item cell" href="/sale_list" data-trackid="首页-快速入口-1"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/menu-1.png"></div></span>永远限购</a>
        <a class="item cell" href="#" data-trackid="首页-快速入口-2"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/menu-2.png"></div></span>活动预售</a>
        <a class="item cell" href="#" data-trackid="首页-快速入口-3"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/menu-3.png"></div></span>美丽女神</a>
        <a class="item cell" href="#" data-trackid="首页-快速入口-4"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/menu-4.png"></div></span>想你所想</a>
    </div><!-- //主菜单 -->

    <div class="cate-swiper mt" data-trackid="首页-品类">
        <div class="swiper-title" id="theme_title">
            <div class="swiper-wrapper">
                {volist name="theme" id="vo" key="k"}
                {if condition = "$k eq $max_theme"}
                <div class="swiper-slide active" id="slide{$vo.id}" data-id="{$vo.id}" data-load="0">{$vo.name}</div>
                {else /}
                <div class="swiper-slide" id="slide{$vo.id}" data-id="{$vo.id}" data-load="0">{$vo.name}</div>
                {/if}
                {/volist}
            </div>
        </div>
        <div class="swiper-container" id="container_id">
            <div class="swiper-wrapper">
                {volist name="theme" id="vo" key="k"}
                <div class="swiper-slide" data-trackid="{$vo.id}">
                    <ul class="cate-list" data-trackid="{$vo.id}">

                    </ul>
                </div>
                {/volist}
            </div>
        </div>
    </div><!-- //首页品类结束 -->

    <div class="floor mt">
        <div class="tab-wrapper">
            <ul class="tab-title">
                <li>推荐专题</li>
                <li>最新商品</li>
            </ul>
            <div class="tab-content">
                {volist name="hot_theme" id="vo" key="k"}
                <div class="tab-item" data-trackid="热销">
                    <div class="m-brand">
                        <div class="brand">
                            <div class="img"><a href="/product.html?id={$vo.id}&type={:config('product.theme')}" data-trackid="热销图片"><img src="{$vo.topicImg.url}"></a></div>
                            <div class="text">
                                <p class="name ellipsis">{$vo.description}</p>
                                <p class="sale">{$vo.name}</p>
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
                <div class="tab-item" data-trackid="首页-精品推荐">
                    <div class="list list-view">
                        {volist name="product" id="vo"}
                        <ul data-id="{$vo.id}">
                            <li>
                                <a class="list-item" href="/product/info.html?id={$vo.id}" data-trackid="首页-精品推荐-1">
                                    <div class="p"><img class="p-pic" src="{$vo.img.url}"></div>
                                    <div class="d">
                                        <h3 class="d-title clamp" style="height: 22px">
                                            {$vo.summary}
                                        </h3>
                                        <h4 class="d-title clamp" style="height: 16px;color: blue">
                                            {$vo.name}
                                        </h4>
                                        <div class="d-main">
                                            <p class="price">
                                                ￥{$vo.price}(p)
                                                <span class="s">￥<em class="n">{$vo.member_price}</em></span>(vip)
                                            </p>
                                            <p class="discount"><b>新品</b></p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
    </div><!-- //闪购&精品推荐 -->
</div>
<script src="__STATIC__/js/zepto.min.js"></script>
<script src="__STATIC__/js/base.min.js"></script>
<script src="__STATIC__/js/swiper.js"></script>
<script src="__STATIC__/js/tab.js"></script>
<script src="__STATIC__/js/shopin.js"></script>
<script>
    //焦点图
    var mySwiper = new Swiper ('.slide-banner', {
        pagination: '.swiper-pagination',
        autoplay: 3000,
        autoplayDisableOnInteraction: false
    });

    //分类swiper
    var titSwiper;
    var conSwiper;
    function goLocation(i){
        conSwiper.slideTo(i, 300, function(){});
        setClass(i);
    }
    var titSwiper = new Swiper('.swiper-title', {
        slidesPerView: 4.5
    });

    var conSwiper = new Swiper('.swiper-container', {
        pagination : '.pagination',
        preloadImages: false,
        lazyLoading: true
    });
    conSwiper.params.onSlideChangeEnd = function(){
        var index = conSwiper.activeIndex;
        var prevIndex = conSwiper.previousIndex;
        if (index > prevIndex){
            titSwiper.slideTo(index, 300, function() {});
            var slidleft = $("#slide" + index).offset().left;
            var slidwidth = $("#slide" + index).width();
            setClass(index);
        }else{
            titSwiper.slideTo(index, 300, function() {});
            setClass(index);
        };
    };
    $(".swiper-title").find('.swiper-slide').each(function(index, el) {
        $(el).on('click', function(){
            goLocation(index);
        });
    });
    function setClass(i) {
        $(".swiper-title").find('.swiper-slide').each(function(index, el) {
            if (index != i) {
                if ($(el).hasClass("active")) {
                    $(el).removeClass("active");
                }
            } else {
                $(el).addClass("active");
            }
        });
    };

    //选项卡
    $(".tab-wrapper").tab();
</script>
<script src="__STATIC__/js/jquery-3.1.1.min.js"></script>
<script>
    $.noConflict();
    function getInfo(that, theme_id) {
        if(that.attr('data-load') == 1) {
            // 已经加载过
            jQuery('#container_id div ul li').find(".swiper-lazy-loaded").removeClass('swiper-lazy-loaded');
            jQuery('#container_id div[data-trackid="' + theme_id + '"]').addClass('swiper-slide-active');
            var img_list = jQuery('#container_id div[data-trackid="' + theme_id + '"] img');
            for (var i = 0; i < img_list.length; i++) {
                var src = img_list[i].dataset.srcString;
                jQuery(img_list[i]).attr('data-src', src);
            }
        } else {
            jQuery.ajax({
                type : 'get',
                url : "/theme_product",
                data:{
                    id : theme_id
                },
                success:function(data){
                    var data = data.data;
                    if(data.products){
                        that.attr('data-load', 1);
                        jQuery('#container_id div ul li').find(".swiper-lazy-loaded").removeClass('swiper-lazy-loaded');
                        jQuery('#container_id ul[data-trackid="' + theme_id + '"]').empty();
                        jQuery('#container_id div[data-trackid="' + theme_id + '"]').addClass('swiper-slide-active');
                        for (var i = 0; i < data.products.length; i++) {
                            if(data.products[i].status) {
                                var li = '<li><a href="/product/info.html?id=' + data.products[i].id + '" data-trackid="首页-品类一-1"><img src="' + data.products[i].url + '" class="swiper-lazy swiper-lazy-loaded" data-src-string="' + data.products[i].url + '"><span class="ellipsis">' + data.products[i].name + '</span></a></li>';
                                jQuery('#container_id div ul[data-trackid="' + theme_id + '"]').append(li);
                            }
                        }
                    }
                },
                error:function(error){
                    //异常处理；
                    console.log(error);
                }
            });
        }
    }
    jQuery('#theme_title div div').click(function(){
        var that = jQuery(this);
        var theme_id = that.attr('data-id');
        getInfo(that, theme_id);
    })
    $('#slide{$max_theme}').click();
</script>
</body>
=======
{include file="public:head" /}
{include file="public:footer" /}
55555
<div class="content">
    <div class="slide-banner" data-trackid="首页-焦点图">
        <div class="swiper-wrapper">
            {volist name="banner" id="vo"}
            <div class="swiper-slide"><a href="banner/to?type={$vo.type}&key_word={$vo.key_word}" data-trackid="首页-焦点图-{$vo.id}"><div class="ware-img ui-imglazyload" data-url="{$vo.img.url}"></div></a></div>
            {/volist}
        </div>
        <div class="swiper-pagination"></div>
    </div><!-- //焦点图结束 -->

    <div class="menu flex">
        <a class="item cell" href="/sale_list" data-trackid="首页-快速入口-1"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/menu-1.png"></div></span>永远限购</a>
        <a class="item cell" href="#" data-trackid="首页-快速入口-2"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/menu-2.png"></div></span>活动预售</a>
        <a class="item cell" href="#" data-trackid="首页-快速入口-3"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/menu-3.png"></div></span>美丽女神</a>
        <a class="item cell" href="#" data-trackid="首页-快速入口-4"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/menu-4.png"></div></span>想你所想</a>
    </div><!-- //主菜单 -->

    <div class="cate-swiper mt" data-trackid="首页-品类">
        <div class="swiper-title" id="theme_title">
            <div class="swiper-wrapper">
                {volist name="theme" id="vo" key="k"}
                {if condition = "$k eq $max_theme"}
                <div class="swiper-slide active" id="slide{$vo.id}" data-id="{$vo.id}" data-load="0">{$vo.name}</div>
                {else /}
                <div class="swiper-slide" id="slide{$vo.id}" data-id="{$vo.id}" data-load="0">{$vo.name}</div>
                {/if}
                {/volist}
            </div>
        </div>
        <div class="swiper-container" id="container_id">
            <div class="swiper-wrapper">
                {volist name="theme" id="vo" key="k"}
                <div class="swiper-slide" data-trackid="{$vo.id}">
                    <ul class="cate-list" data-trackid="{$vo.id}">

                    </ul>
                </div>
                {/volist}
            </div>
        </div>
    </div><!-- //首页品类结束 -->

    <div class="floor mt">
        <div class="tab-wrapper">
            <ul class="tab-title">
                <li>推荐专题</li>
                <li>最新商品</li>
            </ul>
            <div class="tab-content">
                {volist name="hot_theme" id="vo" key="k"}
                <div class="tab-item" data-trackid="热销">
                    <div class="m-brand">
                        <div class="brand">
                            <div class="img"><a href="/product.html?id={$vo.id}&type={:config('product.theme')}" data-trackid="热销图片"><img src="{$vo.topicImg.url}"></a></div>
                            <div class="text">
                                <p class="name ellipsis">{$vo.description}</p>
                                <p class="sale">{$vo.name}</p>
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
                <div class="tab-item" data-trackid="首页-精品推荐">
                    <div class="list list-view">
                        {volist name="product" id="vo"}
                        <ul data-id="{$vo.id}">
                            <li>
                                <a class="list-item" href="/product/info.html?id={$vo.id}" data-trackid="首页-精品推荐-1">
                                    <div class="p"><img class="p-pic" src="{$vo.img.url}"></div>
                                    <div class="d">
                                        <h3 class="d-title clamp" style="height: 22px">
                                            {$vo.summary}
                                        </h3>
                                        <h4 class="d-title clamp" style="height: 16px;color: blue">
                                            {$vo.name}
                                        </h4>
                                        <div class="d-main">
                                            <p class="price">
                                                ￥{$vo.price}(p)
                                                <span class="s">￥<em class="n">{$vo.member_price}</em></span>(vip)
                                            </p>
                                            <p class="discount"><b>新品</b></p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
    </div><!-- //闪购&精品推荐 -->
</div>
<script src="__STATIC__/js/zepto.min.js"></script>
<script src="__STATIC__/js/base.min.js"></script>
<script src="__STATIC__/js/swiper.js"></script>
<script src="__STATIC__/js/tab.js"></script>
<script src="__STATIC__/js/shopin.js"></script>
<script>
    //焦点图
    var mySwiper = new Swiper ('.slide-banner', {
        pagination: '.swiper-pagination',
        autoplay: 3000,
        autoplayDisableOnInteraction: false
    });

    //分类swiper
    var titSwiper;
    var conSwiper;
    function goLocation(i){
        conSwiper.slideTo(i, 300, function(){});
        setClass(i);
    }
    var titSwiper = new Swiper('.swiper-title', {
        slidesPerView: 4.5
    });

    var conSwiper = new Swiper('.swiper-container', {
        pagination : '.pagination',
        preloadImages: false,
        lazyLoading: true
    });
    conSwiper.params.onSlideChangeEnd = function(){
        var index = conSwiper.activeIndex;
        var prevIndex = conSwiper.previousIndex;
        if (index > prevIndex){
            titSwiper.slideTo(index, 300, function() {});
            var slidleft = $("#slide" + index).offset().left;
            var slidwidth = $("#slide" + index).width();
            setClass(index);
        }else{
            titSwiper.slideTo(index, 300, function() {});
            setClass(index);
        };
    };
    $(".swiper-title").find('.swiper-slide').each(function(index, el) {
        $(el).on('click', function(){
            goLocation(index);
        });
    });
    function setClass(i) {
        $(".swiper-title").find('.swiper-slide').each(function(index, el) {
            if (index != i) {
                if ($(el).hasClass("active")) {
                    $(el).removeClass("active");
                }
            } else {
                $(el).addClass("active");
            }
        });
    };

    //选项卡
    $(".tab-wrapper").tab();
</script>
<script src="__STATIC__/js/jquery-3.1.1.min.js"></script>
<script>
    $.noConflict();
    function getInfo(that, theme_id) {
        if(that.attr('data-load') == 1) {
            // 已经加载过
            jQuery('#container_id div ul li').find(".swiper-lazy-loaded").removeClass('swiper-lazy-loaded');
            jQuery('#container_id div[data-trackid="' + theme_id + '"]').addClass('swiper-slide-active');
            var img_list = jQuery('#container_id div[data-trackid="' + theme_id + '"] img');
            for (var i = 0; i < img_list.length; i++) {
                var src = img_list[i].dataset.srcString;
                jQuery(img_list[i]).attr('data-src', src);
            }
        } else {
            jQuery.ajax({
                type : 'get',
                url : "/theme_product",
                data:{
                    id : theme_id
                },
                success:function(data){
                    var data = data.data;
                    if(data.products){
                        that.attr('data-load', 1);
                        jQuery('#container_id div ul li').find(".swiper-lazy-loaded").removeClass('swiper-lazy-loaded');
                        jQuery('#container_id ul[data-trackid="' + theme_id + '"]').empty();
                        jQuery('#container_id div[data-trackid="' + theme_id + '"]').addClass('swiper-slide-active');
                        for (var i = 0; i < data.products.length; i++) {
                            if(data.products[i].status) {
                                var li = '<li><a href="/product/info.html?id=' + data.products[i].id + '" data-trackid="首页-品类一-1"><img src="' + data.products[i].url + '" class="swiper-lazy swiper-lazy-loaded" data-src-string="' + data.products[i].url + '"><span class="ellipsis">' + data.products[i].name + '</span></a></li>';
                                jQuery('#container_id div ul[data-trackid="' + theme_id + '"]').append(li);
                            }
                        }
                    }
                },
                error:function(error){
                    //异常处理；
                    console.log(error);
                }
            });
        }
    }
    jQuery('#theme_title div div').click(function(){
        var that = jQuery(this);
        var theme_id = that.attr('data-id');
        getInfo(that, theme_id);
    })
    $('#slide{$max_theme}').click();
</script>
</body>
>>>>>>> 93c40d8086b7a8d5a9aa3548fdc8eb06a4272cf7
</html>